Documentos estáticos de Quarto®

Opciones de salida YAML

---
format: html
---

---
format: pdf
---

---
format: typst
---

---
format: 
  html:
    toc: true
    code-fold: true
---

YAML es sensible

---
format:html # invalido, falta espacio luego de :
---

---
format: # invalido, se lee como formato ausente
html
---

---
format: 
  html: # valido pero necesita de opciones posteriores
---

format: html # valido - hay espacio

# valido - formato con opciones
format: 
  html:
    toc: true

Ventajas de RStudio

RStudio (también algunos otros editores como VSCode) integran entre sus herramientas la finalización enriquecida: podemos comenzar con una palabra y tabular (TAB) para completar, o presionar Ctrl + espacio para ver todas las opciones disponibles.

️ Actividad 1

• Genere un nuevo proyecto y dentro un documento de Quarto desde RStudio (formato HTML)

• Pruebe Ctrl + space para visualizar las opciones de YAML

• Pruebe con la tabulación para completar otras opciones que recuerde

Texto y Markdown

Inicialmente y para el uso general conviene aprovechar el modo Visual de RStudio para incorporar marcas de lenguaje Markdown.

Bloques

Pandoc y, por tanto, Quarto aceptan bloques Divs y Spans propios del HTML con sintaxis delimitada por :::

Bloques

• Se puede pensar en una división ::: como un <div> HTML pero que también sirve cuando la salida es en PDF.

• De forma similar, los spans entre corchetes texto se pueden considerar como un <span .class>Texto</span> de HTML pero nuevamente estos son compatibles para aplicar atributos nativos de Pandoc/Quarto.

• Tanto los Divs como los Spans se pueden agregar desde el modo Visual: Format -> Div… y Format -> Span…

Bloques de llamadas

️ Actividad 2

• Regrese al documento HTML Quarto que generó recién

• Inserte algún bloque Div sobre alguna palabra y cambie su color

• Inserte algún bloque Span sobre un párrafo y modifique el tamaño de la letra con font-size: 36px;

• Inserte el bloque de llamada que desee y configúrelo.

• En cada situación visualice los cambios en el modo Source y renderice

Fragmentos / columnas

TabSet (Pestañas)

```{r}
#| eval: false
head(datasets::iris)
```

  Sepal.Length Sepal.Width Petal.Length Petal.Width Species
1          5.1         3.5          1.4         0.2  setosa
2          4.9         3.0          1.4         0.2  setosa
3          4.7         3.2          1.3         0.2  setosa
4          4.6         3.1          1.5         0.2  setosa
5          5.0         3.6          1.4         0.2  setosa
6          5.4         3.9          1.7         0.4  setosa

Diagramas

Quarto tiene soporte nativo para incrustar diagramas Mermaid y Graphviz . Esto permite crear diagramas de flujo, diagramas de secuencia, diagramas de estado, diagramas de Gantt y otros utilizando una sintaxis de texto plano inspirada en Markdown.

```{mermaid}
flowchart LR
  A[Inicio] --> B(Pre-proceso)
  B --> C{Decisión}
  C --> D[Resultado 1]
  C --> E[Resultado 2]
```

• Para ver más sobre la documentación de Mermaid.js

️ Actividad 3

• En el documento HTML Quarto que estamos editando, inserte un bloque TabSet con dos pestañas. En cada una de ellas incluya una imagen (puede capturarla con la herramienta Recortes de Windows) y almacenarla dentro de la carpeta de trabajo del proyecto.

• Incorpore un diagrama Mermaid. Puede copiar el ejemplo de la diapositiva o modificarlo a gusto.

• En cada situación visualice los cambios en el modo Source y renderice